<template>
    <div class="tab-panel">
        <div class="tab-panel-slot">
            <slot name="breadcrumbPanel">

            </slot>
        </div>
        <div class="tab-panel-slot">
            <slot name="searchPanel">

            </slot>
        </div>
        <div class="tab-panel-slot">
            <slot name="tablePanel">

            </slot>
        </div>
        <div class="tab-panel-slot">
            <slot name="footerPanel">

            </slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TabContent",
    }
</script>

<style scoped>
    .tab-panel {
        margin: 0 0 15px;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: white;
        box-shadow: darkgrey 5px 5px 30px 5px ;
    }

    .tab-panel-slot {
        margin-bottom: 15px;
    }
</style>
